<template>
  <view class="container">
    <view class="top-bar">
      <navigator class="back-btn" @click="goBack">←</navigator>
      <text class="title">请求帮助</text>
      <view class="help-btn" @click="showHelpTips">?</view>
    </view>

    <scroll-view scroll-y="true" class="content">
      
      <view class="card">
        <view class="card-header">
          <text class="card-title">老人信息</text>
          <view class="add-elderly" @click="addElderly">+ 添加老人</view>
        </view>
        <view class="card-content">
          <view v-if="selectedElderly" class="elderly-info">
            <image :src="selectedElderly.avatar" class="elderly-avatar"></image>
            <view class="elderly-details">
              <text class="elderly-name">{{selectedElderly.name}}</text>
              <text class="elderly-age">{{selectedElderly.age}}岁</text>
              <text class="elderly-address">{{selectedElderly.address}}</text>
            </view>
            <view class="change-elderly" @click="selectElderly">更换</view>
          </view>
          <view v-else class="no-elderly">
            <text class="no-elderly-text">请先选择需要帮助的老人</text>
            <button class="select-elderly-btn" @click="selectElderly">选择老人</button>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-header">
          <text class="card-title">帮助类型</text>
        </view>
        <view class="card-content">
          <view class="help-type-options">
            <view 
              v-for="(type, index) in helpTypes" 
              :key="index"
              :class="['help-type-option', selectedHelpType === type.value ? 'active' : '']"
              @click="selectHelpType(type.value)"
            >
              <text class="help-type-icon">{{type.icon}}</text>
              <text class="help-type-name">{{type.name}}</text>
              <text class="help-type-desc">{{type.desc}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 帮助时间卡片 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">帮助时间</text>
        </view>
        <view class="card-content">
          <view class="form-item">
            <text class="label">期望日期</text>
            <picker 
              mode="date" 
              :value="helpRequest.date" 
              @change="onDateChange"
              class="picker"
            >
              <view class="picker-display">
                <text class="picker-text">{{helpRequest.date || '请选择日期'}}</text>
                <text class="picker-icon">📅</text>
              </view>
            </picker>
          </view>

          <view class="form-item">
            <text class="label">期望时间</text>
            <picker 
              mode="time" 
              :value="helpRequest.time" 
              @change="onTimeChange"
              class="picker"
            >
              <view class="picker-display">
                <text class="picker-text">{{helpRequest.time || '请选择时间'}}</text>
                <text class="picker-icon">⏰</text>
              </view>
            </picker>
          </view>

          <view class="form-item">
            <text class="label">预计时长</text>
            <view class="duration-options">
              <view 
                v-for="(duration, index) in durationOptions" 
                :key="index"
                :class="['duration-option', helpRequest.duration === duration.value ? 'active' : '']"
                @click="selectDuration(duration.value)"
              >
                <text class="duration-text">{{duration.label}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-header">
          <text class="card-title">详细描述</text>
        </view>
        <view class="card-content">
          <textarea 
            v-model="helpRequest.description" 
            placeholder="请详细描述需要帮助的具体内容，例如：陪伴老人去医院复诊、帮助购买生活用品、协助老人进行康复锻炼等..." 
            class="description-textarea"
            maxlength="500"
          ></textarea>
          <text class="char-count">{{helpRequest.description.length}}/500</text>
        </view>
      </view>

      <view class="card">
        <view class="card-header">
          <text class="card-title">特殊需求</text>
          <text class="optional">(选填)</text>
        </view>
        <view class="card-content">
          <view class="special-needs-options">
            <view 
              v-for="(need, index) in specialNeeds" 
              :key="index"
              :class="['special-need-option', helpRequest.specialNeeds.includes(need.value) ? 'active' : '']"
              @click="toggleSpecialNeed(need.value)"
            >
              <text class="special-need-text">{{need.label}}</text>
            </view>
          </view>
          
          <view class="custom-need" v-if="helpRequest.specialNeeds.includes('other')">
            <input 
              type="text" 
              placeholder="请输入其他特殊需求" 
              v-model="helpRequest.customNeed" 
              class="custom-need-input"
              maxlength="100"
            />
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-header">
          <text class="card-title">紧急程度</text>
        </view>
        <view class="card-content">
          <view class="urgency-options">
            <view 
              v-for="(level, index) in urgencyLevels" 
              :key="index"
              :class="['urgency-option', helpRequest.urgency === level.value ? 'active' : '']"
              @click="selectUrgency(level.value)"
            >
              <text class="urgency-icon">{{level.icon}}</text>
              <text class="urgency-name">{{level.name}}</text>
              <text class="urgency-desc">{{level.desc}}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-header">
          <text class="card-title">联系方式</text>
        </view>
        <view class="card-content">
          <view class="form-item">
            <text class="label">联系人</text>
            <input 
              type="text" 
              placeholder="请输入联系人姓名" 
              v-model="helpRequest.contactName" 
              class="input"
              maxlength="20"
            />
          </view>

          <view class="form-item">
            <text class="label">联系电话</text>
            <input 
              type="number" 
              placeholder="请输入联系电话" 
              v-model="helpRequest.contactPhone" 
              class="input"
              maxlength="11"
            />
          </view>

          <view class="form-item">
            <text class="label">微信/QQ</text>
            <input 
              type="text" 
              placeholder="选填，方便志愿者联系" 
              v-model="helpRequest.contactWechat" 
              class="input"
              maxlength="30"
            />
          </view>
        </view>
      </view>

      <view class="tip-card">
        <text class="tip-title">💡 服务说明</text>
        <text class="tip-content">志愿者将在您预约的时间上门提供服务。如有变动请提前通知，多次无故取消可能会影响您的信用。</text>
      </view>
    </scroll-view>

    
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedElderly: null,
      helpRequest: {
        date: '',
        time: '',
        duration: 1,
        description: '',
        specialNeeds: [],
        customNeed: '',
        urgency: 'normal',
        contactName: '',
        contactPhone: '',
        contactWechat: ''
      },
      helpTypes: [
        { icon: '🛍️', name: '购物帮助', value: 'shopping', desc: '代买生活用品' },
        { icon: '🏥', name: '就医陪同', value: 'medical', desc: '陪同看病取药' },
        { icon: '🍽️', name: '餐饮协助', value: 'meal', desc: '协助准备餐食' },
        { icon: '🚶', name: '出行陪伴', value: 'companion', desc: '陪伴外出活动' },
        { icon: '🏠', name: '家务协助', value: 'housework', desc: '简单家务整理' },
        { icon: '💊', name: '用药提醒', value: 'medication', desc: '提醒按时服药' },
        { icon: '📞', name: '电话关怀', value: 'carecall', desc: '定期电话问候' },
        { icon: '🔧', name: '其他帮助', value: 'other', desc: '其他类型帮助' }
      ],
      selectedHelpType: '',
      durationOptions: [
        { label: '1小时', value: 1 },
        { label: '1.5小时', value: 1.5 },
        { label: '2小时', value: 2 },
        { label: '2.5小时', value: 2.5 },
        { label: '3小时', value: 3 }
      ],
      specialNeeds: [
        { label: '需要女性志愿者', value: 'female' },
        { label: '需要医护经验', value: 'medical' },
        { label: '需要本地志愿者', value: 'local' },
        { label: '需要会方言', value: 'dialect' },
        { label: '需要车辆协助', value: 'vehicle' },
        { label: '其他特殊需求', value: 'other' }
      ],
      urgencyLevels: [
        { icon: '💚', name: '普通', value: 'normal', desc: '3天内安排' },
        { icon: '💛', name: '较急', value: 'urgent', desc: '24小时内安排' },
        { icon: '❤️', name: '紧急', value: 'emergency', desc: '立即安排' }
      ],
      elderlyList: [
        {
          id: 1,
          name: '李奶奶',
          age: 78,
          address: '幸福小区3栋2单元501室',
          avatar: '/static/images/elderly/avatar1.jpg'
        },
        {
          id: 2,
          name: '王爷爷',
          age: 82,
          address: '阳光家园5栋1单元302室',
          avatar: '/static/images/elderly/avatar2.jpg'
        }
      ]
    }
  },
  computed: {
    canSubmit() {
      return this.selectedElderly && 
             this.selectedHelpType && 
             this.helpRequest.date && 
             this.helpRequest.time && 
             this.helpRequest.description && 
             this.helpRequest.contactName && 
             this.helpRequest.contactPhone
    }
  },
  onLoad(options) {
    if (options.elderlyId) {
      const elderly = this.elderlyList.find(item => item.id == options.elderlyId)
      if (elderly) {
        this.selectedElderly = elderly
      }
    }
    const tomorrow = new Date()
    tomorrow.setDate(tomorrow.getDate() + 1)
    this.helpRequest.date = this.formatDate(tomorrow)
  },
  methods: {
    goBack() {
      uni.navigateTo({
      	url:"/pages/regularUser/regularUser"
      })
    },
    showHelpTips() {
      uni.showModal({
        title: '使用帮助',
        content: '请先选择需要帮助的老人，然后填写详细的帮助需求信息。志愿者会根据您的需求提供相应的服务。',
        showCancel: false
      })
    },
    addElderly() {
      uni.navigateTo({
        url: '/pages/elderly/add'
      })
    },
    selectElderly() {
      uni.showActionSheet({
        itemList: this.elderlyList.map(item => item.name),
        success: (res) => {
          this.selectedElderly = this.elderlyList[res.tapIndex]
        }
      })
    },
    selectHelpType(value) {
      this.selectedHelpType = value
    },
    onDateChange(e) {
      this.helpRequest.date = e.detail.value
    },
    onTimeChange(e) {
      this.helpRequest.time = e.detail.value
    },
    selectDuration(value) {
      this.helpRequest.duration = value
    },
    toggleSpecialNeed(value) {
      const index = this.helpRequest.specialNeeds.indexOf(value)
      if (index > -1) {
        this.helpRequest.specialNeeds.splice(index, 1)
      } else {
        this.helpRequest.specialNeeds.push(value)
      }
    },
    selectUrgency(value) {
      this.helpRequest.urgency = value
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    calculatePrice() {
     
      const basePrice = 30
      const urgencyMultiplier = {
        'normal': 1,
        'urgent': 1.2,
        'emergency': 1.5
      }
      return Math.round(basePrice * this.helpRequest.duration * urgencyMultiplier[this.helpRequest.urgency])
    },
    validateForm() {
      if (!this.selectedElderly) {
        uni.showToast({
          title: '请选择需要帮助的老人',
          icon: 'none'
        })
        return false
      }
      
      if (!this.selectedHelpType) {
        uni.showToast({
          title: '请选择帮助类型',
          icon: 'none'
        })
        return false
      }
      
      if (!this.helpRequest.date) {
        uni.showToast({
          title: '请选择期望日期',
          icon: 'none'
        })
        return false
      }
      
      if (!this.helpRequest.time) {
        uni.showToast({
          title: '请选择期望时间',
          icon: 'none'
        })
        return false
      }
      
      if (!this.helpRequest.description.trim()) {
        uni.showToast({
          title: '请填写详细描述',
          icon: 'none'
        })
        return false
      }
      
      if (!this.helpRequest.contactName.trim()) {
        uni.showToast({
          title: '请输入联系人姓名',
          icon: 'none'
        })
        return false
      }
      
      if (!this.helpRequest.contactPhone.trim()) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        })
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.helpRequest.contactPhone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    submitHelpRequest() {
      if (!this.validateForm()) {
        return
      }
      
      // 模拟提交数据
      uni.showLoading({
        title: '提交中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showModal({
          title: '提交成功',
          content: '您的帮助请求已提交，志愿者将在24小时内与您联系确认。',
          showCancel: false,
          success: () => {
            uni.navigateBack()
          }
        })
      }, 1500)
    }
  }
}
</script>

<style>
page {
  background-color: #f8f8f8;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}


.top-bar {
  padding: 15px 20px;
  background:  #FD995E;
  display: flex;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255, 87, 34, 0.2);
}

.back-btn {
  font-size: 24px;
  color: white;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: center;
  flex: 1;
}

.help-btn {
  color: white;
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
}

.content {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
  padding-bottom: 80px;
}


.card {
  background-color: white;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  background-color: #fff8e1;
  border-bottom: 1px solid #ffecb3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #ff9800;
}

.optional {
  font-size: 12px;
  color: #999;
}

.add-elderly {
  font-size: 14px;
  color: #ff9800;
}

.card-content {
  padding: 20px;
}

/* 老人信息 */
.elderly-info {
  display: flex;
  align-items: center;
}

.elderly-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  border: 2px solid #ffcc80;
}

.elderly-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.elderly-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.elderly-age {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.elderly-address {
  font-size: 14px;
  color: #888;
}

.change-elderly {
  color: #ff9800;
  font-size: 14px;
  padding: 8px 15px;
  border: 1px solid #ff9800;
  border-radius: 15px;
}

.no-elderly {
  text-align: center;
  padding: 20px 0;
}

.no-elderly-text {
  display: block;
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.select-elderly-btn {
  background:  #FD995E;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0 25px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.help-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.help-type-option {
  width: calc(50% - 6px); /* 减去gap的一半，确保两个选项正好占据一行 */
  padding: 15px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px; /* 设置最小高度，确保所有选项高度一致 */
}

.help-type-option.active {
  background-color: #fff3e0;
  border-color: #ff9800;
  color: #ff9800;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.help-type-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.help-type-name {
  display: block;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.help-type-desc {
  display: block;
  font-size: 12px;
  color: #666;
  line-height: 1.3;
}

/* 表单项目 */
.form-item {
  margin-bottom: 20px;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 15px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 15px;
  height: 40px;
  box-sizing: border-box;
}

.input:focus {
  border-color: #ff9800;
}

/* 选择器样式 */
.picker {
  width: 100%;
}

.picker-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.picker-text {
  font-size: 15px;
  color: #333;
}

.picker-text:empty::before {
  content: attr(placeholder);
  color: #999;
}

.picker-icon {
  font-size: 16px;
}

/* 时长选项 */
.duration-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.duration-option {
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background-color: #f9f9f9;
  transition: all 0.3s;
}

.duration-option.active {
  background-color: #fff3e0;
  border-color: #ff9800;
  color: #ff9800;
}

.duration-text {
  font-size: 14px;
}

/* 详细描述 */
.description-textarea {
  width: 100%;
  height: 120px;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 15px;
  box-sizing: border-box;
  line-height: 1.5;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

/* 特殊需求 */
.special-needs-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.special-need-option {
  padding: 8px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  background-color: #f9f9f9;
  transition: all 0.3s;
}

.special-need-option.active {
  background-color: #fff3e0;
  border-color: #ff9800;
  color: #ff9800;
}

.special-need-text {
  font-size: 14px;
}

.custom-need-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 15px;
  box-sizing: border-box;
}

/* 紧急程度 */
.urgency-options {
  display: flex;
  gap: 10px;
}

.urgency-option {
  flex: 1;
  padding: 15px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s;
}

.urgency-option.active {
  background-color: #fff3e0;
  border-color: #ff9800;
  color: #ff9800;
}

.urgency-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.urgency-name {
  display: block;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.urgency-desc {
  display: block;
  font-size: 12px;
  color: #666;
}

/* 提示卡片 */
.tip-card {
  background-color: #fff8e1;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid #ff9800;
}

.tip-title {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #ff9800;
  margin-bottom: 8px;
}

.tip-content {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}


</style>